<template>
  <view class="task">
    <u-tabs
      :list="list4"
      :current="current"
      @change="handleTabChange"
      lineWidth="30"
      lineColor="#f56c6c"
      :activeStyle="{
        color: '#303133',
        fontWeight: 'bold',
        transform: 'scale(1.05)',
      }"
      :inactiveStyle="{
        color: '#606266',
        transform: 'scale(1)',
      }"
      itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;"
    >
    </u-tabs>
    <view v-if="items.length > 0">
      <view class="TaskItem" v-for="(item, index) in items" :key="index">
        <view class="top"
          >任务编号：{{ item.transportTaskId }}
          <text v-if="item.isDelay">已延迟</text>
        </view>
        <u-steps current="1" direction="column">
          <u-steps-item :title="item.startAddress">
            <text class="slot-icon1" slot="icon">起</text>
          </u-steps-item>
          <u-steps-item :title="item.endAddress">
            <text class="slot-icon2" slot="icon">止</text>
          </u-steps-item>
        </u-steps>
        <view class="bottom">
          <view class="left">
            <view class="left-top">提货时间</view>
            <view class="left-bottom">{{ item.planArrivalTime }}</view>
          </view>
          <view class="right">
            <button>提货</button>
          </view>
        </view>
      </view>
    </view>
    <view v-else>
      <view class="noData">
        <view>
          <image src="/static/noData.png" />
          <view>无待提取货物</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
// 导入dayjs
import dayjs from "dayjs";
export default {
  name: "indexPage",
  data() {
    return {
      list4: [
        {
          name: "待提货",
        },
        {
          name: "在途",
        },
        {
          name: "已完成",
        },
      ],
      current: 0,
      items: [],
    };
  },
  methods: {
    handleTabChange(e) {
      this.current = e.index;
    },
    timeDiffer() {
      this.items.forEach((item, index) => {
        const time = dayjs(item.planArrivalTime).valueOf();
        console.log(Date.now(), time)
        if (Date.now() - time > 0) {
          item.isDelay = true;
        } else {
          console.log("未延迟");
        }
      });
      console.log(this.items, "this.items")
    },
  },
  onReady() {},
  //页面显示的生命周期
  async onShow() {
    // 获得任务列表
    const { data } = await uni.$http.get("/tasks/list", {
      status: 1,
      page: 1,
      pageSize: 5,
    });
    this.items = data.data.items;
    this.timeDiffer();
  
  },
};
</script>
<style lang="scss">
.task {
  background-color: #f5f5f5;
  // 条件编译，微信端
  /* #ifdef MP-WEIXIN */
  margin-top: 25px;
  /* #endif */
}
/deep/ .u-tabs {
  background-color: #fff;
  height: 40px;
}
/deep/ .slot-icon2 {
  width: 21px;
  height: 21px;
  background-color: #ef4f3f;
  border-radius: 100px;
  font-size: 12px;
  color: #fff;
  line-height: 21px;
  text-align: center;
}
/deep/ .slot-icon1 {
  width: 21px;
  height: 21px;
  background-color: #2a2929;
  border-radius: 100px;
  font-size: 12px;
  color: #fff;
  line-height: 21px;
  text-align: center;
}
/deep/ .u-steps-item__line {
  background-color: #d9d9d9 !important;
  margin-top: 27px;
  height: 15px !important;
  z-index: 999;
}
button {
  width: 90px;
  text-align: center;
  height: 40px;
  line-height: 40px;
  color: #fef6f5;
  background-color: #ef4f3f;
  border-radius: 30px;
}
.TaskItem {
  margin: 0 15px;
  padding: 15px;
  background-color: #ffffff;
  border-radius: 10px;
  margin-top: 15px;
  .top {
    margin-bottom: 10px;
    text {
      display: inline-block;
      position: relative;
      width: 50px;
      height: 22px;
      text-align: center;
      line-height: 22px;
      border: 1px solid #ef4f3f;
      border-radius: 11px;
      color: #ef4f3f;
      font-size: 12px;
      margin-left: 3px;
      /* margin-top: 5px; */
      top: -2px;
      right: -10px;
    }
  }
  .bottom {
    margin-top: 10px;
    display: flex;
    justify-content: space-between;
    .left-bottom {
      margin-top: 15px;
    }
  }
}
.noData {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 580px;
  text-align: center;
  color: #818181;
  image {
    width: 200px;
    height: 120px;
    margin: 0 auto;
  }
}
</style>